<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Page Title</title> 
	<link rel="stylesheet" href="../jquery.mobile-1.0rc2.min.css" />
	<script src="../jquery-1.6.4.min.js"></script>
	<script src="../jquery.mobile-1.0rc2.min.js"></script>
</head>
<body>
     <!-- Start of first page -->
	<div data-role="page" id="foo">

              <div data-role="header">
                     <h1>Foo</h1>
              </div><!-- /header -->
       
              <div data-role="content">	
                     <p>I'm first in the source order so I'm shown as the page.</p>		
                     <p>View internal page called <a href="#bar">bar</a></p>	
              </div><!-- /content -->
       
              <div data-role="footer">
                     <h4>Page Footer</h4>
              </div><!-- /header -->
       </div><!-- /page -->


       <!-- Start of second page -->
       <div data-role="page" id="bar">
       
              <div data-role="header">
                     <h1>Bar</h1>
              </div><!-- /header -->
       
              <div data-role="content">	
                     <p>I'm first in the source order so I'm shown as the page.</p>		
                     <p><a href="#foo">Back to foo</a></p>	
              </div><!-- /content -->
       
              <div data-role="footer">
                     <h4>Page Footer</h4>
              </div><!-- /header -->
       </div><!-- /page -->

</body>
</html>
